<template>
  <div>
    <el-tabs v-if="canEdit" v-model="activeName" @tab-click="handleClick">
      <template v-for="item in optList">
        <el-tab-pane v-if="item.isShow" :key="item.code" :name="item.code">
          <span slot="label"><i :class="item.icon" /> {{ item.name }}</span>
        </el-tab-pane>
      </template>
    </el-tabs>
    <transition name="fade-transform" mode="out-in">
      <router-view :key="key" :competition-info="competitionInfo" />
      <!--
        competitionInfo 传递路线，数据用于区分是否是联赛决赛 2021年9月27日17:00
        ↓ src\views\game\manage\league\dataManage\index.vue
        ↓ league/:parentId => src\views\game\manage\league\dataManage\gameDataDetails\index.vue
        ↓ LeagueGameDataSubstation => src\views\game\manage\league\dataManage\gameDataDetails\mainIndex\index.vue
          ---
        ↓ LeagueGameDataInd => src\views\game\manage\dataManage\personalDetails\index.vue
        ↓ src\views\game\manage\dataManage\personalDetails\confirmed.vue
       -->
    </transition>
  </div>
</template>
<script>
import {
  api_GET_EventsManagementCompetitionId // 获取指定赛事
} from '@/extend/api/gameswaggerApi/app';
export default {
  name: 'GameDetail',
  data() {
    return {
      activeName: '',
      optList: [],
      substationInfo: {},
      canEdit: true, // 判断是否C端申请的分站赛，是否需要显示
      competitionInfo: {}
    };
  },
  computed: {
    key() {
      const $route = this.$route;
      let _path = null;
      if ($route.meta.animateKey) {
        _path = $route.meta.animateKey.split('/');
        _path = _path.map(item => {
          if (item.indexOf(':') > -1) {
            return $route.params[item.replace(':', '')];
          }
          return item;
        });
        _path = _path.join('/');
      }
      return _path || this.$route.path;
    }
  },
  watch: {
    '$route': {
      handler: function(val, old) {
        this.init();
      }
    }
  },
  created() {
    this.getGameInfo();
    // this.init();
  },
  methods: {
    // 获取赛事详情
    getGameInfo() {
      var that = this;
      const _id = this.$route.params.id;
      if (_id) {
        api_GET_EventsManagementCompetitionId(_id).then(res => {
          this.competitionInfo = res;
          that.canEdit = res.canEdit;
          this.init();
        }, error => {
          const _msg = error.error.message || error.message;
          this.$message({ type: 'error', message: _msg });
          this.init();
        });
      } else {
        that.canEdit = true;
        this.init();
      }
    },
    init() {
      const $route = this.$route;
      this.gameId = this.$route.params.parentId;
      const _optList = [
        {
          code: 'LeagueGameEdit',
          name: '赛事编辑',
          icon: '',
          isShow: !!this.gameId
        },
        {
          code: 'LeagueGameCreateEvent',
          name: '创建项目',
          icon: '',
          isShow: !!this.gameId
        },
        {
          code: 'LeagueGameExpenses',
          name: '费用设置',
          icon: '',
          isShow: !!this.gameId
        },
        // {
        //   code: 'LeagueGameSchedule',
        //   name: '日程安排',
        //   icon: '',
        //   isShow: !!this.gameId
        // },
        {
          code: 'LeagueGameData',
          name: '数据管理',
          icon: '',
          isShow: !!this.gameId
        },
        {
          code: 'LeagueIntegralSetting',
          name: '积分设置',
          icon: '',
          isShow: !!this.gameId
        }
        // {
        //   code: 'GameAuth',
        //   name: '权限设置',
        //   icon: '',
        //   isShow: !!this.gameId
        // }
      ];
      this.activeName = $route.meta.activeTab || $route.name;
      this.optList = _optList;
    },
    handleClick(val) {
      const name = val.name;
      const { query } = this.$route;
      query.gameName = query.gameName || '';
      this.$router.push({
        name: name,
        params: {
          tenantId: 't__' + (this.tenantId || '')
        },
        query: query
      });
    }
  }
};
</script>
